<template>
  <div class="normal-content">
    <el-carousel :interval="4000" height="100%" class="carousel-box">
      <el-carousel-item v-for="(item, index) in images" :key="index">
        <img :src="item" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
    <div class="content-box">
      <AuthorWrapper
        :nickname="props.articleData.author.nickname"
        :avatar="props.articleData.author.avatar"
      />
      <el-scrollbar min-size="1px">
        <p class="title">{{ props.articleData.title }}</p>
        <p class="content">{{ content }}</p>
        <CommentSection
          :articleId="props.articleData.id"
          @report="(comment) => emit('report', comment)"
        />
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { typeIdEnum } from "@/utils/articleConfig";
import CommentSection from "@/components/CommentSection/index.vue";
import AuthorWrapper from "@/components/AuthorWrapper/index.vue";
const emit = defineEmits(["report"]);
const props = defineProps({
  articleData: {
    type: Object,
    default: () => ({}),
  },
});
const images = ref([]);
const content = ref("");
watchEffect(() => {
  images.value = [];
  if (!props.articleData?.blocks) return;
  props.articleData.blocks.forEach((item) => {
    if (item.type === typeIdEnum.picture) {
      images.value.push(item.text);
    }
    if (item.type === typeIdEnum.text) {
      content.value = item.text;
    }
  });
});
</script>

<style scoped lang="scss">
.normal-content {
  height: 90vh;
  display: flex;
}

.carousel-box {
  flex: 1;
  background-color: #f0f2f5;
}

.content-box {
  width: 30%;
  margin-left: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
  }

  .content {
    white-space: pre-wrap;
  }
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}
</style>
